<template>
  <div class="wrap">
    <el-form
      :inline="true"
      :model="ruleform"
      ref="ruleForm"
      :rules="rules"
      class="demo-form-inline"
    >
      <el-form-item label="Excel文件" prop="excel">
        <el-input
          v-model.trim="ruleform.excel"
          placeholder="格式为：xxxxx.xslx"
        ></el-input>
      </el-form-item>
      <el-form-item label="表单名" prop="sheet">
        <el-input v-model.trim="ruleform.sheet" placeholder=""></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="onSubmit('ruleForm')"
          >导入</el-button
        >
        <el-button type="warning" plain @click="onReset('ruleForm')"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div class="pic-box">
      <div class="txt">
        适用于以下模板：（其中红框列字段值如果为空，该行将会被忽略，“IP地址”不能为空）
      </div>
      <img src="~assets/img/import-pic.png" alt="" />
    </div>
  </div>
</template>

<script>
import { getData, postData } from "@/request/http";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      ruleform: {
        excel: "",
        sheet: "sheet1",
      },
      rules: {
        excel: [
          { required: true, message: "请输入Excel文件", trigger: "blur" },
        ],
        sheet: [{ required: false, message: "请输入表单名" }],
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    //添加 提交
    onSubmit(formName) {
      var that = this;
      that
        .$confirm("已有数据将会被覆盖，确认导入吗?", "导入", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          that.$refs[formName].validate((valid) => {
            if (valid) {
              postData("/adminweb/device/location/import", {
                excel: that.ruleform.excel,
                sheet: that.ruleform.sheet,
              })
                .then((res) => {
                  if (res.code == 0) {
                    that.$message.success(
                      "已成功导入" + res.datas.count_updated + "条"
                    );
                  } else {
                   that.$message.error(res.code + "，" + res.msg);
                  }
                })
                .catch((res) => {
                 that.$message.error(res);
                });
            } else {
             that.$message.error("error");
              return false;
            }
          });
        })
        .catch((res) => {
          that.$message.success("已取消");
        });
    },
    // 取消
    onReset(val) {
      this.$emit("reset", true);
      this.$refs[val].resetFields();
    },
  },
  watch: {},
};
</script>
<style scoped>
/*标题*/
.show-title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  position: relative;
  background: #c0dee2;
  padding-left: 15px;
  font-size: 14px;
  margin: 6px 0 20px 0;
  border-radius: 10px 10px 0 0;
  font-weight: bold;
}
.show-title2,
.show-title3 {
  margin-top: 60px;
}

.show-title::before {
  content: "";
  width: 2px;
  height: 16px;
  background: #676a6d;
  position: absolute;
  top: 12px;
  left: 27px;
}

.show-title span {
  float: left;
  color: #676a6d;
  margin-left: 25px;
}
.list2 {
  padding-bottom: 130px;
}
.pic-box {
  margin-top: 20px;
  padding-left: 20px;
}
.pic-box .txt {
  width: 100%;
  height: 70px;
  line-height: 70px;
  color: #676a6d;
}
.pic-box img {
  width: 100%;
  height: auto;
}
</style>
